<template>
  <div>
    <!--<h2>CRUD模板</h2>-->
    <Card>
      <Row style="margin-bottom: 20px" @keydown.enter.native="getList">
        <Col span="6" style="display: flex">
          <Input style="width: 300px" v-model="searchForm.bookName" placeholder="请输入" clearable></Input>
        </Col>
        <Col span="18" style="display: flex; gap: 10px">
          <Button type="primary" @click="getList">搜索</Button>
          <Button @click="addVisible = true" type="success" ghost>新增</Button>
        </Col>
      </Row>
      <Table border :columns="columns" :data="tableData"></Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.current"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>

      <Add :visible="addVisible" @close="addVisible = false" />
      <Update :id="currentRow.id" :visible="updateVisible" @close="updateVisible = false" />
    </Card>
  </div>
</template>

<script>
import { deleteBook, getListBookByPage } from '@/api/book'
import Add from '@/views/book/Add'
import Update from '@/views/book/Update'

export default {
  components: { Add, Update },
  mounted() {
    this.getList()
  },
  data() {
    return {
      addVisible: false,
      updateVisible: false,
      currentRow: {
        id: '',
      },
      total: 0,
      searchForm: {
        current: 1,
        pageSize: 10,
      },
      tableData: [],
      columns: [
        {
          title: '书名',
          key: 'bookName',
        },
        {
          title: '作者',
          key: 'author',
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.update(params.row)
                    },
                  },
                },
                '修改',
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    },
                  },
                },
                '删除',
              ),
            ])
          },
        },
      ],
    }
  },
  methods: {
    async getList() {
      const res = await getListBookByPage(this.searchForm)
      if (res.code === 0) {
        this.tableData = res.data.records
        this.total = res.data.total
      } else {
        this.$Message.error('获取数据失败')
      }
    },
    async remove(row) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '请确认您确定要删除数据?',
        loading: true,
        onOk: async () => {
          try {
            const res = await deleteBook({ id: row.id })
            if (res.code === 0) {
              this.$Message.success('删除成功')
              this.getList()
            }
          } catch (e) {
            console.log('删除失败' + e)
          } finally {
            this.$Modal.remove()
          }
        },
      })
    },
    update(row) {
      this.currentRow = row
      this.updateVisible = true
    },
    changePage(v) {
      this.searchForm.current = v
      this.getList()
    },
    changePageSize(v) {
      this.searchForm.pageSize = v
      this.getList()
    },
  },
}
</script>

<style scoped>
.br button {
  margin-right: 16px;
}
</style>